<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>商家</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
	<link href="css/Font-Awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="css/iconfont/iconfont.css" rel="stylesheet">
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="layer/layer.js"></script>
	<style>
		.footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			/* Set the fixed height of the footer here */
			height: 60px;
			background-color: #f5f5f5;
		}
		.sellerImg{
			width: 20%;
			margin-top: 10%;

		}
		.background{
			height:200px;
			width: 100%;
			background-color: #f5f5f5;
		}
		.background-child1{
			height:30%;
			width: 100%;
			background-color: red;
		}

	</style>
	<script type="text/javascript">
        $(document).ready(function(url){
            var sellerId = window.location.href.split("=")[1]

            $.ajax({
                type: "GET",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                contentType: "application/json;charset=utf-8",
                url:"http://localhost:8080/Order/user/seller/" + sellerId, //提交的地址
                async: false,
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                    var html1 = '';
                    var html2 = '';
                    var html3 = '';
                    var html4 = '';
                    
                        html1 +=
                            '<img src="'+
                            data.seller.img +
                            '" class="img-rounded sellerImg" >' +
                            '<h5>' +
                            data.seller.name +
                            '</h5>' +
                            '<h6> 月售 ' +
                            data.seller.sales +
                            '份</h6>' +
                            '<h6 class="text-muted">' +
                            data.seller.introduction +
                            '</h6>' +
                            '<h6 class="text-primary">' +
                            data.seller.promotion +
                            '</h6>'
                    
                    document.getElementById("seller").innerHTML = html1

                    if(data.foods.length > 0){
                        html2 +=
                            '<ul class="sortlist">' +
                            '<a href="user/allFoods/sellerId=' +
                            data.seller.sellerId +
                            '" ><li><h4>销量排行</h4></li></a>' +
                            '<a href="user/foods?sellerId=' +
                            data.seller.sellerId +
                            '&className=a' +
                            '" ><li><h4>主食</h4></li></a>' +
                            '<a href="user/foods?sellerId=' +
                            data.seller.sellerId +
                            '&className=b' +
                            '" ><li><h4>老火靓汤</h4></li></a>' +
                            '<a href="user/foods?sellerId=' +
                            data.seller.sellerId +
                            '&className=c' +
                            '" ><li><h4>饮料</h4></li></a>' +
                            '</ul></ul>'

                    }
                    document.getElementById("cate").innerHTML = html2

                    if(data.foods.length > 0){
                        for(var i = 0;i < data.foods.length;i++){
                            html3 +=
                            	'<div class="clearfix ptb10 borderbf2 ogood">' +
                                '<div class="col-xs-4 plr10">' +
                                '<span id = "foodId" hidden="hidden">' +
                                
                                '</span>' +
                                '<img src="' +
                                data.foods[i].img +
                                '" alt="" class="pull-left img-responsive">' +
                                '</div>' +
                                '<div class="col-xs-8 clearPadding" style="position:relative;">' +
                                '<div>' +
                                '<h4 class="font14 mt0">' +
                                data.foods[i].name +
                                '</h4>' +
                                '<div class="text-muted font10"> 月售  ' +
                                data.foods[i].sales +
                                '</div>' +
                                '<p class="text-dining font14 clearMargin">￥<span class="unitprice" unitprice>' +
                                data.foods[i].price +
                                '</span><span class="text-muted">&nbsp;/份</span></p>' +
                                '</div>' +
                                '<div class="opmbox clearfix">' +
                                '<div class="oplusbox pull-left ominu" onclick="min(this,' +
                                data.foods[i].foodId +
                                ')">' +
                                '<i class="icon iconfont text-dining" style="font-size:24px;position:relative;top:-2px;">&#xe608;</i>' +
                                '</div>' +
                                '<input type="text" class="onum pull-left font12" value="' +
								data.foods[i].sum +
								'" readonly="readonly" name="onum" pid=\\\'{$product.id}\\\'>\'' +
                                '<div class="oplusbox pull-left oplus" onclick="plus(this,' +
                                data.foods[i].foodId +
                                ')">' +
                                '<i class="icon iconfont text-dining" style="font-size:24px;">&#xe605;</i>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>'

                        }
                        document.getElementById("product").innerHTML = html3
                    }
                    html4 +=
                        '<a href="index.html?sellerId=' +
    					data.seller.sellerId +
    					'"> <div class="col-xs-3 col-xs-offset-2  mlr10 text-center ptb10 borderb2"><span>商家</span></div></a>' +
                        '<a href="shoppingCart.html?sellerId=' +
    					data.seller.sellerId +
    					'"><div class="col-xs-3 col-xs-offset-2  mlr10 text-center ptb10 borderb2"><span>购物车</span></div></a>' +
                        '<a href="orders.html?sellerId=' +
    					data.seller.sellerId +
    					'"><div class="col-xs-3 col-xs-offset-2  mlr10 text-center ptb10 borderb2"><span>订单</span></div></a>'
                        document.getElementById("header").innerHTML = html4
                        //接收后台返回的结果

                    
                }
            });
        });
	</script>
</head>
<body>
<div class="background text-center ">
	<div class="">
	</div>
	<div id="seller"></div>

</div>
<HR>
<div class="container">

	<div class="row">

		<div class="tabwrap clearfix">
			<div class="tabcontent clearfix">
				<div class="col-xs-12 clearPadding" id="allproduct">
					<div class="col-xs-3 clearPadding" id='cate' style='position:fixed'>

					</div>
					<div class="col-xs-9 clearPadding bg-white pull-right" id="product">


					</div>
				</div>

			</div>

		</div>

	</div>
	<div class="footer">
		<div class="col-xs-12 clearPadding clearfix tabnav " id="header" style="position:relative;z-index:1;background:#fff;">
			
		</div>
	</div>
</div>
<div class="maskbox"></div>

<script>
    $('.tabnav div.col-xs-4').click(function(){
        var index=$(this).index();
        console.log(index);
        $(this).addClass("borderb2").siblings().removeClass('borderb2');
        $('#tabwrap .tabcontent').eq(index).show();
        $('#tabwrap .tabcontent').eq(index).siblings().hide();
    });
    function setTotal(){
        var allprice=0;
        var allnum=0;
        $("#product .ogood").each(function(){
            var num=parseInt($(this).find('input[name=onum]').val());
            var price=$(this).find('[unitprice]').text();
            allprice+=num*price;
            allnum+=num;
        });
        $("#allprice").html(allprice.toFixed(2));
        $("#allnum").html(allnum);
    }
    function cartProduct(id,name,sellprice,onum){
        var one_price=onum*parseFloat(sellprice);
        one_price=one_price.toFixed(2);
        if($('[productid='+id+']').length>0){
            $('[productid='+id+'] .numbox').html(onum);
            $('[productid='+id+'] .pricebox span').html(one_price);
        }else{
            $('.orderdetail').append('<div class="clearfix borderbottom ptb10 plr15 cartgoods" productid="'+id+'" >\
      <div class="col-xs-7 clearPadding">'+name+'</div>\
      <div class="col-xs-5 clearPadding text-right">\
        <div class="pmbox plus pull-right" onclick="plus(this,'+sellprice+')"><i class="icon iconfont text-dining" style="font-size:24px;">&#xe605;</i></div>\
        <div class="numbox Padding5 pull-right">'+onum+'</div>\
        <div class="pmbox minu pull-right"><i class="icon iconfont text-dining" style="font-size:24px;position:relative;top:-2px;">&#xe608;</i></div>\
        <div class="pricebox pull-right mr15 lh24 text-dining">￥<span>'+one_price+'</span></div>\
      </div>\
    </div>');
        }
    }
    function plus(tag,foodId){
        var _this=$(tag);
        var input=$(tag).prev();
        var onum=parseInt(input.val());
     
		onum++;
		input.val(onum);
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            contentType: "application/json;charset=utf-8",
            url:"http://localhost:8080/Order/user/plusFood/" + foodId, //提交的地址
            async: false,
            error: function(request) {
                alert("Connection error");
            },
            success: function(data) {
                if(data.result == 1)
                    layer.msg("添加成功!");
                }

                //接收后台返回的结果
            });
        }

    function min(tag,foodId){
        var input=$(tag).next();
        var onum=parseInt(input.val());
  
        --onum;
        if(onum<1){
            input.val(0);            
        }else{
            input.val(onum);
        };
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            contentType: "application/json;charset=utf-8",
            url:"http://localhost:8080/Order/user/minusFood/" + foodId, //提交的地址
            async: false,
            error: function(request) {
                alert("Connection error");
            },
            success: function(data) {
                if(data.result == 1)
                    layer.msg("成功减少!");
                }

                //接收后台返回的结果
            });
    }
    //点击购物车订单详情出现和隐藏
    $('.maskbox').height($(document).height());
    $(".orderdetail").hide();
    $(".ocartbox,.maskbox").click(function(){
        $(".maskbox").fadeToggle(300);
        $(".orderdetail").slideToggle(300);
    });
</script>
<script src="js/zepto.js"></script>
<script>
    $('.sortlist li').on('tap',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
    var cate=document.getElementById('cate');
    var cateH=cate.offsetHeight;
    var headerH=document.getElementById("header").offsetHeight;//头的高
    var footerH=document.getElementById('footer').offsetHeight;//尾的高
    var showH=$(window).height()-headerH-footerH;
    var startX_cate,startY_cate,x_cate,y_cate,aboveY_cate=0;
    //触摸
    function touchSatrt_cate(e){
        e.preventDefault();
        var touch=e.touches[0];
        startY_cate = touch.pageY;   //刚触摸时的坐标 
    }
    //滑动
    function touchMove_cate(e){
        e.preventDefault();
        var  touch = e.touches[0];
        y_cate = touch.pageY - startY_cate;//滑动的距离
        //cate.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式     
        cate.style.top=aboveY_cate+y_cate+"px"; //这一句中的                          
    }
    //手指离开屏幕
    function touchEnd_cate(e){
        e.preventDefault();
        aboveY_cate=parseInt(cate.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;
        if(aboveY_cate>0){        //滑动的距离大于0，即向下滑动
            aboveY_cate=0;
            cate.style.top=headerH+'px';
        }else if(Math.abs(aboveY_cate)+showH>cateH){      //滑动距离太大,向上滑动

            if( cateH<=showH ){   //分类的高度小于屏幕
                cate.style.top=headerH+'px';
                aboveY_cate=0;
            }else{
                cate.style.top=-cateH+showH+'px';
                aboveY_cate=parseInt(cate.style.top);
            }
        }
    }
    //分类滑动
    cate.addEventListener('touchstart',touchSatrt_cate);
    cate.addEventListener('touchmove',touchMove_cate);
    cate.addEventListener('touchend',touchEnd_cate);
</script>
</body>
</html>